<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ace="http://www.icefaces.org/icefaces/components"
	xmlns:ice="http://www.icesoft.com/icefaces/component"
	template="/WEB-INF/layout/layout.xhtml">
	
	<ui:param name="userForm" value="#{userController.userForm}" /> 
	
	<ui:define name="title">Catalogo de Usuarios</ui:define>
	<ui:define name="content">
		<ice:panelGroup style="padding-left:10px;padding-top:3px">
				<h:messages for="userForm" showDetail="false" showSummary="true" style="color:red;margin:8px;"  layout="table" />
				<ice:form id="userForm">
					<h:panelGrid columns="2" width="450"
						style="border: 1px solid #CDCDCD;">
						<h:outputLabel for="login" value="Usuario:" />
						<h:inputText id="login"
							value="#{userForm.editUser.login}" 
							size="15" maxlength="10">
							<f:validateLength minimum="1" maximum="10" />
						</h:inputText>
						<h:outputLabel for="name" value="Nombre:" />
						<h:inputText id="name"
							value="#{userForm.editUser.name}" 
							size="40" maxlength="80" />
						<h:outputLabel for="password" value="Contraseña:" />
						<ice:inputSecret id="password"  redisplay="true"
							value="#{userForm.editUser.password}" 
							size="20" maxlength="15" />
						<h:outputLabel for="passwordConfirmation" value="Confirmar Contraseña:" />
						<ice:inputSecret id="passwordConfirmation" redisplay="true"
							value="#{userForm.editUser.passwordConfirm}" 
							size="20" maxlength="15" />
						<h:outputLabel for="selRoles" value="Permisos:" />
		                <ice:selectManyListbox id="selRoles"  style="height:75px;"
		                				 converter="#{roleConverter}"
		                                 value="#{userForm.editUser.roles}">
		                      	<f:selectItems value="#{userForm.roles}"
									var="role" itemValue="#{role}" itemLabel="#{role.name}"  /> 
		                 </ice:selectManyListbox>
						<f:facet name="footer">
							<h:panelGroup style="text-align:right;display:block">
							<h:commandButton value="Guardar"
								actionListener="#{userController.submitUser}" />
							</h:panelGroup>
						</f:facet>
					</h:panelGrid>
				</ice:form>

				<!-- 						<ice:panelGroup style="width:100%;"> -->
				<!-- 							<ice:outputLabel value="Client Name:" size="50" /> -->
				<!-- 							<ice:inputText value="" /> -->
				<!-- 							<ice:commandButton value="Buscar" /> -->
				<!-- 						</ice:panelGroup> -->
				<ice:form>
					<ice:dataTable width="450"
						value="#{userForm.users}" var="user">
						<ice:column>
		          		<f:facet name="header">
								<ice:outputText value="Id" />
							</f:facet>
							<ice:outputText value="#{user.login}" />
						</ice:column>
						<ice:column>
							<f:facet name="header">
								<ice:outputText value="Nombre" />
							</f:facet>
							<ice:outputText value="#{user.name}" />
						</ice:column>

						<ice:column>
							<f:facet name="header"></f:facet>
							<h:commandButton image="images/edit-page.png" alt="Edit"
								title="Edit" style="height: 11px; width: 11px;"
								action="#{userController.editItem}">
								<f:setPropertyActionListener
									target="#{userForm.toEdit}" value="#{user.login}" />
							</h:commandButton>
						</ice:column>
						<ice:column>
							<f:facet name="header"></f:facet>
							<h:commandButton image="images/popup-close.png" alt="Delete"
								title="Delete" style="height: 11px; width: 11px;"
								action="#{userController.removeItem}">
								<f:setPropertyActionListener
									target="#{userForm.toRemove}"
									value="#{user.login}" />
							</h:commandButton>
						</ice:column>
					</ice:dataTable>
				</ice:form>
			</ice:panelGroup>
	</ui:define>
</ui:composition>
